<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/x-template" id="myComponent">
    <span>
        总共{{ total }}个事项,{{done}}个已完成,{{total-done}}个未完成
    </span>
</script>
    <script>
        window.onload=function(){
            Vue.component('todoWord', {
                props:['total','done'],
                template:'#myComponent'
            })
            var app = new Vue({
                el: '#app',
                methods: {
                    tj:function(){
                        this.todos.push({sj:this.sj,done:false});
                        if(this.sj.length!=0){
                            this.num=this.num+1
                        }
                    },
                    switchdel:function(index){
                        this.todos[index].done=!this.todos[index].done;
                    }
                },
                data: {
                    message: 'Todo List',
                    todos: [
//                        {sj:'吃饭',done:false},
//                        {sj:'睡觉',done:false},
//                        {sj:'哈哈哈',done:true}
                    ]
                },
                computed:{
                    done:function(){
                        var n=0;
                        for(var i=0;i<this.todos.length;i++){
                            if(this.todos[i].done){
                             n++;
                            }
                        }
                        return n;
                    }
                }
            })
        }
    </script>
    <style>.del{text-decoration: line-through}</style>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <input v-model="sj" @keyup.enter="tj">
    <button v-on:click="tj">添加</button>
    <div v-for="(todo,index) in todos">
        <input type="checkbox" v-bind:checked="todo.done" v-on:click="switchdel(index)">
        {{index}}
        <span v-bind:class="{del:todo.done}">
            {{ todo.sj }}
        </span>
    </div>
    <p>
        <todo-word :total="todos.length" :done="done"></todo-word>
    </p>
</div>
</body>
</html>